<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<%-- <jsp:include page="/include.jsp"/>  --%>
<form id="add_form" method="post">
    <table class="listtable" style="width: 100%;">
        <tr class="row-even">
            <td class="tr_left"><span class="required">*</span>姓名:&nbsp;</td>
            <td class="tr_right">
                <input type="text" name="name" value="${name}" maxlength="200" class="easyui-validatebox"
                       data-options="required:true,missingMessage:'请输入姓名'"/>
            </td>
            <td class="tr_left" rowspan="4" style="vertical-align: bottom;"></td>
            <td class="tr_right" rowspan="4" style="vertical-align: top;">
                <c:choose>
                    <c:when test="${photo != null && photo != ''}">
                        <img id="photoPanel" src="${pageContext.request.contextPath}${photo}" style="width: 150px; max-height: 200px;">
                    </c:when>
                    <c:otherwise>
                        <img id="photoPanel" src="${pageContext.request.contextPath}/images/headpicture/none.gif" style="width: 150px; max-height: 200px;">
                    </c:otherwise>
                </c:choose>
            </td>
        </tr>
        <tr>
            <td class="tr_left"><span class="required">*</span>性别:&nbsp;</td>
            <td class="tr_right">
                <label>
                    <input type="radio" name="gender" value="1" <c:if test="${gender =='' || gender == null || gender == 1}">checked="checked" </c:if>/>男
                </label>
                <label>
                    <input type="radio" name="gender" value="0" <c:if test="${gender != null && gender != '' && gender == 0}">checked="checked" </c:if>/>女
                </label>
            </td>
        </tr>
        <tr class="row-even">
            <td class="tr_left"><span class="required">*</span>证件类型:&nbsp;</td>
            <td class="tr_right">
                <label>
                    <input type="radio" name="cardType" value="1" <c:if test="${cardType =='' || cardType == null || cardType == 1}">checked="checked" </c:if>/>身份证
                </label>
                <label>
                    <input type="radio" name="cardType" value="2" <c:if test="${cardType != null && cardType != '' && cardType == 2}">checked="checked" </c:if>/>军官证
                </label>
            </td>
        </tr>
        <tr>
            <td class="tr_left"><span class="required">*</span>证件号码:&nbsp;</td>
            <td class="tr_right">
                <input type="text" name="cardNo" value="${cardNo}" maxlength="200" class="easyui-validatebox"
                       data-options="required:true,missingMessage:'请输入证件号码'"/>
            </td>
        </tr>
        <tr class="row-even">
            <td class="tr_left"><span class="required">*</span>级别:&nbsp;</td>
            <td class="tr_right">
                <input class="easyui-combobox" name="level" value="${level}" data-options="
					valueField: 'value',
                    editable:false,
					textField: 'label',
					data: [{
						label: 'A类',
						value: '1'
					},{
						label: 'B类',
						value: '2'
					},{
					},{
						label: 'C类',
						value: '3'
					},{
						label: 'D类',
						value: '4'
					}],required:true,missingMessage:'请选择级别'" class="easyui-combobox"/>
            </td>
            <td class="tr_left"><span class="required">*</span>照片:&nbsp;</td>
            <td class="tr_right">
                <input type="text" name="photo" id="photo" value="${photo}" maxlength="200" class="easyui-validatebox"
                       data-options="required:true,missingMessage:'请上传照片'" readonly/>
                <input type="button" value="上传" onclick="showFileUpload('photo')">
            </td>
        </tr>
        <tr>
            <td class="tr_left"><span class="required">*</span>公司:&nbsp;</td>
            <td class="tr_right" colspan="3">
                <input type="text" name="company" value="${company}" maxlength="200" style="width: 80%;"
                       class="easyui-validatebox" data-options="required:true,missingMessage:'请输入公司名称'"/>
            </td>
        </tr>
        <tr class="row-even">
            <td class="tr_left"><span class="required">*</span>政务:&nbsp;</td>
            <td class="tr_right">
                <input class="easyui-combobox" name="duties" value="${duties}" data-options="
					valueField: 'value',
					textField: 'label',
                    editable:false,
					data: [{
						label: '长官',
						value: '1'
					},{
						label: '士兵',
						value: '2'
					}],required:true,missingMessage:'请选择政务'" class="easyui-combobox"/>
            </td>
            <td class="tr_left"><span class="required">*</span>开启定位:&nbsp;</td>
            <td class="tr_right">
                <label>
                    <input type="radio" name="recordPosition" value="1" <c:if test="${recordPosition =='' || recordPosition == null || recordPosition == 1}">checked="checked" </c:if>/>开启
                </label>
                <label>
                    <input type="radio" name="recordPosition" value="0" <c:if test="${recordPosition != null && recordPosition != '' && recordPosition == 0}">checked="checked" </c:if>/>关闭
                </label>
            </td>
        </tr>
    </table>
    <table id="bind-datagrid"></table>
</form>

<script type="text/javascript">
    //页面加载完后响应 onReady
    //初始化主列表
    $('#bind-datagrid').datagrid({
        url: '${pageContext.request.contextPath}/cnbdw/employeeAction!getAllDatasourceList.action',
        border: false,
        fitColumns: true,
        height: 200,
        pageList: [10, 20, 30],
        rownumbers: false,
        sortName: 'id',
        sortOrder: 'desc',
        striped: true,
        columns: [
            [
                {field: 'ck', checkbox: true},
                {field: 'id', title: '唯一编号', align: 'left', hidden: true, formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                {field: 'name', title: '姓名', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }},
                //{field: 'namePy', title: 'namePy', align: 'left', formatter: function (value, rowData, rowIndex) {if (value == '') {return '--'} return value;}},
                {field: 'gender', title: '性别', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == 1) {
                        return '男'
                    } else {
                        return '女'
                    }
                    return value;
                }},
                {field: 'photo', title: '照片', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if ($.trim(value) != '') {
                        return '<img src="${pageContext.request.contextPath}' + value + '" style="width: 30px; height: 30px;">';
                    }
                    return '--';
                }},
                {field: 'cardNo', title: '卡片号码', align: 'left', formatter: function (value, rowData, rowIndex) {
                    if (value == '') {
                        return '--'
                    }
                    return value;
                }}
            ]
        ],
        onSelect: function (index, item) {
            $('#datagrid1').datagrid('appendRow', {
                id: item.id,
                name: item.name,
                gender: item.gender,
                photo: item.photo,
                cardNo: item.cardNo
            });

            $('#datagrid1').datagrid('checkAll');
        },
        onUnselect: function (ix, row) {
            var rows = $('#datagrid1').datagrid('getRows');
            $.each(rows, function (index, item) {
                if (item.id == row.id) {
                    $('#datagrid1').datagrid('deleteRow', index);
                }
            });
        },
        onSelectAll: function (rows) {
            $.each(rows, function (index, item) {
                $('#datagrid1').datagrid('appendRow', {
                    id: item.id,
                    name: item.name,
                    gender: item.gender,
                    photo: item.photo,
                    cardNo: item.cardNo
                });
            });
            $('#datagrid1').datagrid('checkAll');
        },
        onUnselectAll: function (rows) {
            $.each(rows, function (ix, item) {
                var getRows = $('#datagrid1').datagrid('getRows');
                $.each(getRows, function (index, row) {
                    console.info(item);
                    console.info(row);

                    if (item.id == row.id) {
                        $('#datagrid1').datagrid('deleteRow', index);
                    }
                });
            });
        }
    });

</script>
